<template>
  <div class="hospitalList padding_20">
    <el-input v-model="searchCondition"
              placeholder="医院名称"
              class="w-200"
              clearable
              @clear="handleQuery" />
    <el-button type="primary"
               @click="handleQuery">查 询</el-button>
    <el-button type="primary"
               @click="editPage(null)">新 增</el-button>

    <Table border
           :columns="titles"
           :data="dataList"
           stripe
           class="mt-20">
      <template slot-scope="{row,index}"
                slot="action">
        <span @click="editPage(index)"
              style="font-size: 20px;color: #2b85e4">
          <Icon type="ios-brush" />
        </span>
        <span @click="deleteMedicalUnion(index)"
              style="font-size: 20px;color: darkred">
          <Icon type="ios-trash" />
        </span>
      </template>
    </Table>
    <!--分页-->
    <Page :current.sync="currentPage"
          :total="totals"
          :page-size="pageSize"
          @on-change="handleChange"
          show-total />
    <Modal v-model="editMedicalUnionPage"
           fullscreen
           title="医院药师设置"
           @on-ok="initTableData">

      <el-card>
        <h3>基本信息</h3>
        <div>
          医联体名称：
          <el-input v-model="editObject.name"
                    placeholder="请输入医联体名称"
                    style="width: 300px" />
          医联体介绍：
          <el-input v-model="editObject.content"
                    type="textarea"
                    :rows="2"
                    style="width: 300px"
                    placeholder="请输入医联体介绍" />
          备注：
          <el-input v-model="editObject.remark"
                    type="textarea"
                    :rows="2"
                    style="width: 300px"
                    placeholder="请输入医联体备注" />
          <el-button type="primary"
                     @click="saveMedicalUnion">保 存</el-button>
        </div>
      </el-card>

      <el-card class="mt-20">
        <h3>医院配置</h3>
        <div class="mt-20">
          <el-input v-model="hospitalName"
                    placeholder="请输入医院名称"
                    clearable
                    class="w-200" />
          <el-button type="primary"
                     @click="initHospital">查 询</el-button>
          <el-button type="success"
                     @click="addHospital">新增医院</el-button>
          <el-button type="danger"
                     @click="deleteHospital(-1)">删 除</el-button>
        </div>
        <Table class="mt-20"
               border
               :columns="hospitalTitle"
               :data="hospitalList"
               @on-selection-change="changeHospital">
          <template slot-scope="{row,index}"
                    slot="action">
            <span @click="setLeaderHospital(index, row)"
                  style="font-size: 20px;color: #00A539">
              <Icon type="ios-construct" />
            </span>
            <span @click="deleteHospital(index)"
                  style="font-size: 20px;color: #BB0000">
              <Icon type="md-close-circle" />
            </span>
          </template>
        </Table>
        <Page :current.sync="hcurrentPage"
              :total="htotals"
              :page-size="hpageSize"
              @on-change="initHospital"
              show-total />
      </el-card>
      <el-card class="mt-20">
        <h3>值班医生配置</h3>
        <div class="mt-20">
          <el-input v-model="doctorName"
                    placeholder="请输入医生名称"
                    clearable
                    class="w-200" />
          <el-button type="primary"
                     @click="initDoctor">查 询</el-button>
          <el-button type="success"
                     @click="addDoctor">新 增</el-button>
        </div>

        <Table class="mt-20"
               border
               :columns="doctorTitle"
               :data="doctorList">
          <template slot-scope="{row,index}"
                    slot="action">
            <span @click="deleteDoctor(index)"
                  style="font-size: 20px;color: #BB0000">
              <Icon type="md-close-circle" />
            </span>
          </template>
        </Table>
        <Page :current.sync="dcurrentPage"
              :total="dtotals"
              :page-size="dpageSize"
              @on-change="initDoctor"
              show-total />
      </el-card>

    </Modal>

    <Modal v-model="addHospitalModel"
           width="700px"
           title="新增医院"
           @on-ok="saveMedicalUnionHospital">
      <el-input v-model="hospitalName"
                placeholder="请输入医院名称"
                class="w-200" />
      <el-button type="primary"
                 @click="searchHospital">查 询</el-button>
      <Table class="mt-20"
             border
             :columns="totalHospitalTitle"
             :data="totalHospitalList"
             @on-selection-change="changeMedicalUnionHospital">
      </Table>
      <Page :current.sync="totalCurrentPage"
            :total="totalTotals"
            :page-size="totalPageSize"
            @on-change="searchHospital"
            show-total />
    </Modal>
    <Modal v-model="addDoctorModel"
           width="60%"
           title="新增医生"
           @on-ok="saveMedicalUnionDoctor">

      <el-input v-model="doctorName"
                class="w-200"
                placeholder="请输入医生名称" />
      <el-button type="primary"
                 @click="searchDoctor">查 询</el-button>

      <Table class="mt-20"
             border
             :columns="doctorTitle"
             :data="totalDoctorList"
             @on-selection-change="changeMedicalUnionDoctor">
        <template slot-scope="{row,index}"
                  slot="action">
        </template>
      </Table>
      <Page :current.sync="totalDCurrentPage"
            :total="totalDTotals"
            :page-size="totalDPageSize"
            @on-change="searchDoctor"
            show-total />
    </Modal>
    <el-dialog title="头像"
               center
               :visible.sync="imageModal"
               width="30%">
      <img :src="imageUrl"
           style="width:100%;height:100%">
      <span slot="footer">
        <el-button type="primary"
                   @click="imageModal = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "medicalUnion",
    data () {
      return {
        imageModal: false,
        imageUrl: null,
        searchCondition: "",
        doctorName: "",
        totalDCurrentPage: 1,
        totalDTotals: 0,
        totalDPageSize: 10,
        totalCurrentPage: 1,
        totalTotals: 0,
        totalPageSize: 10,
        currentPage: 1,
        totals: 0,
        pageSize: 20,
        hcurrentPage: 1,
        htotals: 0,
        hpageSize: 10,
        dcurrentPage: 1,
        dtotals: 0,
        dpageSize: 10,
        editMedicalUnionPage: false,
        addHospitalModel: false,
        addDoctorModel: false,
        hospitalName: "",
        titles: [
          {
            title: '医联体名称',
            key: 'name'
          },
          {
            title: '介绍',
            key: 'content'
          },
          {
            title: '备注',
            key: 'remark'
          },
          {
            title: '创建时间',
            key: 'createTime',
            render: (h, params) => {
              return h('span',
                this.commonFunction.timestampFormat(new Date(params.row.createTime), 'yyyy-MM-dd hh:mm:ss'));
            }
          },
          {
            title: '修改时间',
            key: 'laseUpdateTime',
            render: (h, params) => {
              return h('span',
                this.commonFunction.timestampFormat(new Date(params.row.lastUpdateTime), 'yyyy-MM-dd hh:mm:ss'));
            }
          },
          {
            title: '操作',
            slot: 'action',
            align: 'center',
            width: 100
          }
        ],
        totalHospitalTitle: [
          {
            title: '选择',
            key: 'checkBox',
            type: 'selection',
            width: 60
          },
          {
            title: '医院名称',
            key: 'name'
          }
        ],
        hospitalTitle: [
          {
            title: '选择',
            key: 'checkBox',
            type: 'selection',
            width: 60
          },
          {
            title: '头像',
            key: 'imageUrl',
            width: 95,
            render: (h, params) => {
              return h('div', [
                h('img', {
                  attrs: {
                    src: params.row.imageUrl
                  },
                  style: {
                    width: '60px',
                    height: '60px',
                    'border-radius': '50%'
                  },
                  on: {
                    click: (event) => {
                      this.showBigImage(params.row.imageUrl);
                    }
                  }
                }),
              ]);
            }
          },
          {
            title: '医院名称',
            key: 'hospitalName'
          },
          {
            title: '医院等级',
            key: 'level'
          },
          {
            title: '领头医院',
            key: 'isLeader'
          },
          {
            title: '备注',
            key: 'remark'
          },
          {
            title: '创建时间',
            key: 'createTime',
            render: (h, params) => {
              return h('span',
                this.commonFunction.timestampFormat(new Date(params.row.createTime), 'yyyy-MM-dd hh:mm:ss'));
            }
          },
          {
            title: '操作',
            slot: 'action',
            align: 'center',
            width: 100
          }
        ],
        doctorTitle: [
          {
            title: '选择',
            key: 'checkBox',
            type: 'selection',
            width: 60
          },
          {
            title: '医生名称',
            key: 'doctorName'
          },
          {
            title: '医生职称',
            key: 'doctorTitleName'
          },
          {
            title: '医生科室',
            key: 'departmentName'
          },
          {
            title: '医院名称',
            key: 'hospitalName'
          },
          {
            title: '备注',
            key: 'remark'
          },
          {
            title: '创建时间',
            key: 'createTime',
            render: (h, params) => {
              return h('span',
                params.row.createTime ? this.commonFunction.timestampFormat(new Date(params.row.createTime), 'yyyy-MM-dd hh:mm:ss') : '--');
            }
          },
          {
            title: '操作',
            slot: 'action',
            align: 'center',
            width: 100
          }
        ],
        dataList: [],
        hospitalList: [],
        totalHospitalList: [],
        doctorList: [],
        selectedHospital: [],
        selectedDoctor: [],
        totalDoctorList: [],
        editObject: {
          name: "",
          content: "",
          remark: ""
        }
      }
    },
    created () {
      this.initTableData();
    },
    methods: {
      showBigImage (url) {
        this.imageUrl = url;
        this.imageModal = true;
      },
      handleQuery() {
        this.currentPage=1
        this.initTableData()
      },
      initTableData () {
        let param = {
          "searchCondition": this.searchCondition,
          "pageIndex": this.currentPage - 1,
          "pageSize": this.pageSize
        };
        this.post(this.api.hospitalManager.getMedicalUnionList, param).then((res) => {
          if (res.data.code === '200') {
            this.dataList = res.data.object;
            this.totals = res.data.totalNum;
          } else {
            this.$Message.error(res.data.message);
          }
        });
      },

      initHospital () {
        let medicalUnionId = null;
        if (this.editObject && this.editObject.id) {
          medicalUnionId = this.editObject.id;
          let param = {
            "medicalUnionId": medicalUnionId,
            "hospitalName": this.hospitalName,
            "pageIndex": this.hcurrentPage - 1,
            "pageSize": this.hpageSize
          };
          this.post(this.api.hospitalManager.getMedicalUnionHospitalList, param).then((res) => {
            if (res.data.code === '200') {
              this.hospitalList = res.data.object;
              this.htotals = res.data.totalNum;
            } else {
              this.$Message.error(res.data.message);
            }
          });
        } else {
          this.hospitalList = [];
        }
      },
      initDoctor () {
        let medicalUnionId = null;
        if (this.editObject && this.editObject.id) {
          medicalUnionId = this.editObject.id;
          let param = {
            "medicalUnionId": medicalUnionId,
            "doctorName": this.doctorName,
            "pageIndex": this.dcurrentPage - 1,
            "pageSize": this.dpageSize
          };
          this.post(this.api.hospitalManager.getMedicalUnionDoctorlList, param).then((res) => {
            if (res.data.code === '200') {
              this.doctorList = res.data.object;
              this.dtotals = res.data.totalNum;
            } else {
              this.$Message.error(res.data.message);
            }
          });
        } else {
          this.doctorList = [];
        }
      },
      addHospital () {
        this.addHospitalModel = true;
        this.searchHospital();
      },
      searchHospital () {
        let param = {
          "name": this.hospitalName,
          "pageIndex": this.totalCurrentPage - 1,
          "pageSize": this.totalPageSize
        };

        this.post(this.api.hospitalManager.list, param).then((res) => {
          if (res.data.code === '200') {
            this.totalHospitalList = res.data.object;
            this.totalTotals = res.data.totalNum;
          } else {
            this.$Message.error(res.data.message);
          }
        });
      },
      editPage (obj) {
        this.editMedicalUnionPage = true;

        if (obj != null && obj != undefined) {
          this.editObject = this.dataList[obj];
        } else {
          this.editObject = {
            name: "",
            content: "",
            remark: ""
          }
        }
        this.initHospital();
        this.initDoctor();
      },
      handleChange () {

      },
      deleteMedicalUnion (index) {
        if (index == null || index == undefined) {
          this.$Message.info("请选择需要删除的数据");
          return;
        }
        let data = this.dataList[index];
        this.post(this.api.hospitalManager.deleteMedicalUnion, data).then((res) => {
          if (res.data.code === '200') {
            this.$message.info("保存成功");
            this.initTableData();
          }
        });

      },
      // 医院配置 - 删除医院
      deleteHospital (index) {
        if (index >= 0) {
          this.$confirm('确认删除？')
            .then(_ => {
              let param = this.hospitalList[index];
              this.post(this.api.hospitalManager.deleteMedicalUnionHospital, param).then((res) => {
                if (res.data.code === '200') {
                  this.$message.success("删除成功");
                  this.initHospital();
                }
              });
            })
            .catch(_ => { });
        }

      },
      // 值班医生配置 - 删除医生配置
      deleteDoctor (index) {
        this.$confirm('确认删除？')
          .then(_ => {
            let param = this.doctorList[index];
            this.post(this.api.hospitalManager.deleteMedicalUnionDoctor, param).then((res) => {
              if (res.data.code === '200') {
                this.$message.success("删除成功");
                this.initDoctor();
              }
            });
          })
          .catch(_ => { });

      },
      saveMedicalUnion () {
        let name = this.editObject.name;
        if (name == null || name == undefined || name == "") {
          this.$Message.error("医联体名称不能为空");
          return;
        }
        this.post(this.api.hospitalManager.saveMedicalUnion, this.editObject).then((res) => {
          if (res.data.code === '200') {
            this.editObject = res.data.object;
            this.$message.success("保存成功");
          }
        });
      },
      saveMedicalUnionHospital () {
        let id = this.editObject.id;
        if (id == null || id == undefined || id == 0) {
          this.$message.error("医联体ID为空，请先保存医联体数据。");
          return;
        }

        if (this.selectedHospital == null || this.selectedHospital == undefined || this.selectedHospital.length == 0) {
          this.$message.error("请选择医院");
          return;
        }
        let ids = [];
        for (let i = 0; i < this.selectedHospital.length; i++) {
          ids.push(this.selectedHospital[i].id);
        }
        let param = {
          "medicalUnionId": id,
          "jsonData": ids
        };
        this.post(this.api.hospitalManager.saveMedicalUnionHospital, param).then((res) => {
          if (res.data.code === '200') {
            this.initHospital();
            this.$message.success("保存成功");
          }
        });
      },
      changeHospital (val) {
        console.log(val);
      },
      changeMedicalUnionHospital (selection) {
        this.selectedHospital = selection;
      },
      setLeaderHospital (index, row) {
        const text = row.isLeader === 0 ? '确认设置为领头医院' : '取消设置领头医院';
        this.$confirm(`${text}？`)
          .then(_ => {
            let param = this.hospitalList[index];
            this.post(this.api.hospitalManager.setLeaderHospital, param).then((res) => {
              if (res.data.code === '200') {
                this.initHospital();
                this.$message.success(`${text}成功`);
              }
            });
          })
          .catch(_ => { });

      },
      // 查询医生列表
      searchDoctor () {
        let medicalUnionId = null;
        if (this.editObject && this.editObject.id) {
          medicalUnionId = this.editObject.id;
        }
        let param = {
          "medicalUnionId": medicalUnionId,
          "doctorName": this.doctorName,
          "pageIndex": this.totalDCurrentPage - 1,
          "pageSize": this.totalDPageSize
        };
        this.post(this.api.hospitalManager.getUnMedicalUnionDoctorList, param).then((res) => {
          if (res.data.code === '200') {
            this.totalDoctorList = res.data.object;
            this.totalDTotals = res.data.totalNum;
          }
        });
      },
      addDoctor () {
        this.addDoctorModel = true;
        this.searchDoctor();
      },
      changeMedicalUnionDoctor (selection) {
        this.selectedDoctor = selection;
      },
      saveMedicalUnionDoctor () {
        let jsonData = this.selectedDoctor;
        if (jsonData == null || jsonData == undefined || jsonData.length == 0) {
          this.$Message.error("请选择医生");
          return;
        }
        let id = this.editObject.id;
        if (id == null || id == undefined || id == 0) {
          this.$Message.error("医联体ID为空，请先保存医联体数据。");
          return;
        }
        let param = {
          "medicalUnionId": id,
          "jsonData": jsonData
        };
        this.post(this.api.hospitalManager.saveMedicalUnionDoctor, param).then((res) => {
          if (res.data.code === '200') {
            this.initDoctor();
            this.$message.success("保存成功");
          }
        });
      },

    }
  }
</script>

<style scoped>
</style>
